2<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list :immediate-check="false"
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad">
      <!-- 评论列表项组件 -->
      <comment-item v-for="(item,index) in list"
                    :key="index"
                    @openReply="$emit('openReply',$event)"
                    :comment-info="item" />
    </van-list>
    <!-- 评论列表 -->
  </div>
</template>

<script>
import { getComments } from '@/api/comment'
import commentItem from './comment-item'
export default {
  components: { commentItem },
  name: 'CommentList',
  props: {
    // 源id，文章id或评论id
    sourceId: {
      type: [Object, Number, String],
      required: true
    },
    // 文章评论列表
    list: {
      type: Array,
      require: true
    },
    // 获取的类型
    type: {
      default: 'a', // 默认是文章的评论
      type: String
    }
  },
  data () {
    return {
      // list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null, // 页码
      limit: 10 // 每页数量
    }
  },
  created () {
    this.onLoad() // 主动触发
  },
  methods: {
    async onLoad () {
      try {
        // 1.发请求
        const { data: res } = await getComments({
          type: this.type, // a是文章的评论，c是评论的回复
          source: this.sourceId.toString(), // 文章id或评论id
          offset: this.offset, // 页码
          limit: this.limit // 每页数量
        })
        // 4.成功处理
        // 4.0 加工数据
        // 4.1 追加数据
        // this.list = [...this.list, ...res.data.results]  // 赋值算修改
        this.list.push(...res.data.results) // 不算修改props
        // 4.2 判断是否结束，结束就设置finished为true，不结束设置页码
        if (res.data.results.length < this.limit) {
          this.finished = true
        } else {
          this.offset = res.data.last_id
        }
        // 通知父亲大人更新评论总数
        this.$emit('updateCommentTotal', res.data.total_count)
      } catch (error) {
        // 2.错误处理
        console.dir(error)
        this.$toast.fail('获取评论列表失败')
      }
      // 3.无论成功失败都要关闭加载中
      this.loading = false
    }
  }
}
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .van-list {
    margin-bottom: 45px;
  }
</style>
